<script type="text/javascript">
    $(document).ready(function () {
        function megaHoverOver() {
            $(this).find(".sub").stop().fadeTo('fast', 1).show();

            //Calculate width of all ul's
            (function ($) {
                jQuery.fn.calcSubWidth = function () {
                    rowWidth = 0;
                    //Calculate row
                    $(this).find("ul").each(function () {
                        rowWidth += $(this).width();
                    });
                };
            })(jQuery);

            if ($(this).find(".row").length > 0) { //If row exists...
                var biggestRow = 0;
                //Calculate each row
                $(this).find(".row").each(function () {
                    $(this).calcSubWidth();
                    //Find biggest row
                    if (rowWidth > biggestRow) {
                        biggestRow = rowWidth;
                    }
                });
                //Set width
                $(this).find(".sub").css({'width':biggestRow});
                $(this).find(".row:last").css({'margin':'0'});

            } else { //If row does not exist...

                $(this).calcSubWidth();
                //Set Width
                $(this).find(".sub").css({'width':rowWidth});

            }
        }

        function megaHoverOut() {
            $(this).find(".sub").stop().fadeTo('fast', 0, function () {
                $(this).hide();
            });
        }


        var config = {
            sensitivity:2, // number = sensitivity threshold (must be 1 or higher)
            interval:100, // number = milliseconds for onMouseOver polling interval
            over:megaHoverOver, // function = onMouseOver callback (REQUIRED)
            timeout:500, // number = milliseconds delay before onMouseOut
            out:megaHoverOut // function = onMouseOut callback (REQUIRED)
        };

        $("ul#topnav li .sub").css({'opacity':'0'});
        $("ul#topnav li").hoverIntent(config);


    });
    
    function callResizeImages() {
    	var r=confirm("This tool will resize all images to fitable size. Are your sure ?");
    	if (r==true) {
    		window.location.href = document.getElementById("resizeImages");
    	} 
    }
</script>

<span style="visibility: hidden;">
#{a  @Admin.resizeImages(),id:'resizeImages'} Resize Images #{/a}
</span>
<div id="navbar" style="z-index: 940; ">
    <ul id="topnav">
        <li>
            <a href="#" class="nozzles">&{'admin.menu.topic'}</a>

            <div class="sub" style="z-index: 930; width: 300px; opacity: 0; display: none; ">
                <ul>
                    <li>
                    #{a  @Admin.listTopic()} &{'admin.menu.topic.listTopic'} #{/a}
                    </li>

                    <li>
                    #{a  @Admin.inputTopic()} &{'admin.menu.topic.inputTopic'} #{/a}
                    </li>
                </ul>
            </div>
        </li>
        <li>
        #{a  @Menus.list(),class:"nozzles"} Menus #{/a}
        </li>

        <li>
        #{a  @TinTucs.list(),class:"nozzles"} Tin Tức #{/a}
        </li>

        <li>
        #{a  @AppGroups.list(),class:"nozzles"} Qly Lĩnh Vực #{/a}
        </li>

        <li>
        #{a  @Apps.list(),class:"nozzles"} Qly Ngành #{/a}
        </li>

        <li>
        #{a  @Brands.list(),class:"nozzles"} Qly Hãng #{/a}
        </li>

        <li>
        #{a  @Banners.list(),class:"nozzles"} Qly Banner #{/a}
        </li>

        <li>
        #{a  @SeoConfigs.list(),class:"nozzles"} Qly SEO #{/a}
        </li>

 		<li>
            <a href="#" class="nozzles">Tools</a>

            <div class="sub" style="z-index: 930; width: 300px; opacity: 0; display: none; ">
                <ul>
                    <li>
                    	<a href="javascript:callResizeImages();"> Resize Images </a>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>